<template>
    <div class="orderSetting">
        <div class="con">
            <div class="form">
                <el-form :model="form" label-width="120px" :rules="rules">
                    <el-form-item label="秒杀订单超过:">
                        <div style="display: flex;width: 100%;">
                            <el-input v-model="form.flashtime">
                                <template #append>分</template>
                            </el-input>
                            <span style="line-height: 40px;">未付款，订单自动关闭</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="正常订单超过:">
                        <div style="display: flex;width: 100%;">
                            <el-input v-model="form.normaltime">
                                <template #append>分</template>
                            </el-input>
                            <span style="line-height: 40px;">未付款，订单自动关闭</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="发货超过:">
                        <div style="display: flex;width: 100%;">
                            <el-input v-model="form.date">
                                <template #append>天</template>
                            </el-input>
                            <span style="line-height: 40px;">未收货，订单自动完成</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="订单完成超过:">
                        <div style="display: flex;width: 100%;">
                            <el-input v-model="form.finishdate">
                                <template #append>天</template>
                            </el-input>
                            <span style="line-height: 40px;">自动结束交易，不能申请售后</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="订单完成超过:">
                        <div style="display: flex;width: 100%;">
                            <el-input v-model="form.commentdate">
                                <template #append>天</template>
                            </el-input>
                            <span style="line-height: 40px;">自动五星好评</span>
                        </div>
                    </el-form-item>
                </el-form>
                <div style="text-align:center;">
                    <el-button type="primary" size="large" @click="edit">提交</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive } from 'vue';
import { ElMessage, ElMessageBox, FormRules } from 'element-plus';
import * as http from "@/request/api"
const form = reactive({
    flashtime: 0,
    normaltime: 0,
    date: 0,
    finishdate: 0,
    commentdate: 0
})
// 获取订单设置
http.admin.orderSetting(1).then((res) => {
    form.flashtime = res.data.flashOrderOvertime;
    form.normaltime = res.data.normalOrderOvertime;
    form.date = res.data.confirmOvertime;
    form.finishdate = res.data.finishOvertime;
    form.commentdate = res.data.commentOvertime
})
// 修改设置
function edit() {
    if (form.commentdate && form.date && form.finishdate && form.flashtime && form.normaltime) {
        ElMessageBox.confirm(
            '是否要提交修改?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                http.admin.editSetting({ id: 1, flashOrderOvertime: form.flashtime, normalOrderOvertime: form.normaltime, confirmOvertime: form.date, finishOvertime: form.finishdate, commentOvertime: form.commentdate })
                ElMessage({
                    type: 'success',
                    message: '修改成功',
                })
            })
    } else {
        ElMessage({
            message: '提交参数不合法',
            duration: 1500,
            type: 'warning',
        })
    }
}
// 表单校验
const rules = reactive<FormRules>({
    flashtime: { required: true, message: '时间不能为空', trigger: 'blur' },
    normaltime: { required: true, message: '时间不能为空', trigger: 'blur' },
    finishdate: { required: true, message: '时间不能为空', trigger: 'blur' },
    commentdate: { required: true, message: '时间不能为空', trigger: 'blur' },
    date: { required: true, message: '时间不能为空', trigger: 'blur' },
})

</script>
    
<style scoped>
.orderSetting {
    width: 100%;
    height: 95%;
    position: relative;
}

.con {
    width: 750px;
    position: absolute;
    inset: 0;
    margin: auto;
    margin-top: 20px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    padding: 35px;
}

.form {
    padding: 20px;
    margin-left: 62px;

}

:deep(.el-form-item__label) {
    line-height: 40px;
}

:deep(.el-form-item) {
    margin-bottom: 32px;
}

:deep(.el-form) {
    padding: 0;
}

.el-input {
    width: 50%;
    margin-right: 15px;
    height: 40px;
}
</style>